<script setup>
import { ref, markRaw } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
})

const myEchart = ref(null)
const showChart = ref(false)
const filterValue = ref([0, 100])

const option = ref({
  tooltip: {
    trigger: 'item',
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '付款人数',
      data: [],
      type: 'bar',
      itemStyle: {
				color: function (params) {
					return '#' + Math.floor(Math.random()*16777215).toString(16);
				},
      }
    },
  ],
  dataZoom:[
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: filterValue.value[0],
      end: filterValue.value[1]
    },
    {
      type: 'inside',
      xAxisIndex: [0],
      start: filterValue.value[0],
      end: filterValue.value[1]
    },
  ]
})


const setOptionData = (type) => {
  const statr = filterValue.value[0]
  let end = filterValue.value[1]
  if ( end > props.dataSource.length) {
    end = props.dataSource.length
  }  
  const xList = []
  const yList = []
  props.dataSource.forEach((item, index) => {
    if (index >= statr && index <= end) {
      const realSales = item.realSales? parseInt(item.realSales.match(/\d+/)[0]) : 0
      xList.push(`#${index + 1}`)
      yList.push(realSales)
    }
  })
  option.value.xAxis.data = xList;
  option.value.series[0].data = yList;
  nextTick(() => {
    showChart.value = true
    if (type == 'init') {
      myEchart.value =  markRaw(echarts.init( document.getElementById('myEchart')));
      init.value = false
    }
    if (myEchart.value) {
      myEchart.value.setOption(option.value, true);
      myEchart.value.resize(); // 强制重绘图表
    }
  })
};



const init = () => {
  setOptionData('init')
}
watch(() => props.dataSource, () => {
  init()
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <div class="shop-type-analysis">
    <div class="chart">
      <a-spin :spinning="!showChart">
        <div class="filter">
          <span>第</span>
          <a-input-number
            v-model:value="filterValue[0]"
            :min="1"
            :max="props.dataSource.length"
            :style="{ width: '100px',margin: '0 10px' }"
          />
          <span>到</span>
          <a-input-number 
            v-model:value="filterValue[1]"
            :min="filterValue[0] + 1"
            :max="props.dataSource.length"
            :style="{ width: '100px',margin: '0 10px' }"
          />
          <span>页</span>
          <a-button type="primary" @click="setOptionData('update')" style="margin-left: 10px;">查询</a-button>
        </div>
        <div id="myEchart" style="height: 300px;" />
        <!-- <Chart
          v-if="showChart"
          :options="option"
          style="height: 300px;"
        /> -->
      </a-spin>
    </div>
  </div>
</template>

<style scoped>
.filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
